<template>
	<view class="my-page">
		<view class="background1"></view>
		<view class="background2"></view>
		<view class="nav-title" :style="navTitleStyle">我的</view>
		
		<view class="app-pages" style="margin-top: 208rpx;">
			<view class="row-1">
				<image class="image" src="/static/people.png" mode="aspectFill"></image>
				<text class="text">{{phone || ''}}</text>
			</view>
			<view class="row-2">
				<view class="title">我的交易</view>
				<view class="list">
					<view class="list-item" @click="handleOrder(1)">
						<text class="numb">{{tab1Num}}</text>
						<text class="name">待付款</text>
					</view>
					<view class="list-item" @click="handleOrder(2)">
						<text class="numb">{{tab2Num}}</text>
						<text class="name">待发货</text>
					</view>
					<view class="list-item" @click="handleOrder(3)">
						<text class="numb">{{tab3Num}}</text>
						<text class="name">待收货</text>
					</view>
					<view class="list-item" @click="handleOrder(4)">
						<text class="numb">{{tab4Num}}</text>
						<text class="name">待评价</text>
					</view>
					<view class="list-item" @click="handleOrder(0)">
						<text class="numb">{{tab5Num}}</text>
						<text class="name">退货/售后</text>
					</view>
				</view>
			</view>
			
			<view class="row-3 cell" @click="handleAddress">
				<view class="info">
					<view class="icon icon-1"></view>
					<view class="name">收货地址</view>
				</view>
				<u-icon name="arrow-right" color="rgba(90, 90, 90, 1)" size="12"></u-icon>
			</view>
			
			<view class="row-4">
				<view class="cell border" @click="handleSecurities">
					<view class="info">
						<view class="icon icon-2"></view>
						<view class="name">优惠券</view>
					</view>
					<u-icon name="arrow-right" color="rgba(90, 90, 90, 1)" size="12"></u-icon>
				</view>
				<view class="cell">
					<view class="info">
						<view class="icon icon-3"></view>
						<view class="name">我的发票</view>
					</view>
					<u-icon name="arrow-right" color="rgba(90, 90, 90, 1)" size="12"></u-icon>
				</view>
			</view>
			
		</view>
	</view>
</template>
<script>
	import {
		listMyOrder
	} from "@/culturalCreativity/http/my.js";
	export default {
		data(){
			return {
				phone: uni.getStorageSync('phone'),
				tab1Num: 0,
				tab2Num: 0,
				tab3Num: 0,
				tab4Num: 0,
				tab5Num: 0,
			}
		},
		computed:{
			navTitleStyle(){
				let res = wx.getMenuButtonBoundingClientRect();
				return `top:${res.top}px;height:${res.height}px;line-height:${res.height}px;`
			}
		},
		methods: {
			async init(){
				try{
					let arr = []
					let res1 = await listMyOrder({orderState:1});
					let res2 = await listMyOrder({orderState:2});
					let res3 = await listMyOrder({orderState:3});
					let res4 = await listMyOrder({orderState:4});
					let res5 = await listMyOrder({orderState:5});
					this.tab1Num = res1.data.total;
					this.tab2Num = res2.data.total;
					this.tab3Num = res3.data.total;
					this.tab4Num = res4.data.total;
					this.tab5Num = res5.data.total;
				}catch(e){
					console.error("文创我的页面报错culturalCreativity-my",e);
					//TODO handle the exception
				}
			},
			handleAddress() {
				uni.navigateTo({
					url: '/myPages/address/index'
				});
			},
			handleOrder(current){
				uni.setStorageSync('NEXT_PAGE','');
				uni.navigateTo({
					url:"/culturalCreativity/my/order?current=" + current
				});
			},
			handleSecurities() {
				uni.navigateTo({
					url: '/myPages/mySecurities/index'
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.row-4 .cell.border{
		position: relative;
		&::after{
			content: "";
			position: absolute;
			right: 0;
			bottom: 0;
			left: 24rpx;
			border-bottom: 1px solid rgba(238, 238, 238, 1);
		}
	}
	.row-3{
		margin: 24rpx 0;
	}
	.row-4,.row-3{
		border-radius: 30rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}
	.row-3,.cell{
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0 24rpx;
		.info{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 8rpx;
				height: 50rpx;
				width: 50rpx;
			}
			.icon.icon-1{
				background: url() center/cover no-repeat;
			}
			.icon.icon-2{
				background: url() center/cover no-repeat;
			}
			.icon.icon-3{
				background: url() center/cover no-repeat;
			}
		}
	}
	.row-2{
		margin-top: 32rpx;
		width: 100%;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.title{
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #1F1F1F;
			padding: 24rpx 24rpx 32rpx 24rpx;
		}
		.list{
			display: flex;
			.list-item{
				flex:1;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				.numb{
					font-size: 36rpx;
					color: #2E2F31;
				}
				.name{
					margin-top: 12rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
	.row-1{
		display: flex;
		align-items: center;
		.image{
			width: 100rpx;
			height: 100rpx;
			border: 5rpx solid #FFFFFF;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		.text{
			width: 219rpx;
			height: 50rpx;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 50rpx;
			color: #FFFFFF;
		}
	}
	.nav-title{
		position: fixed;
		z-index: 1;
		left: 0;
		right: 0;
		text-align: center;
		font-weight: 500;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	.background1{
		position: fixed;
		z-index: -1;
		left: 0;
		right: 0;
		top: 0;
		height: 474rpx;
		background: linear-gradient(180deg, #FD8F19 0%, rgba(255,194,54,0.5) 100%);
	}
	.background2{
		position: fixed;
		z-index: -2;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(247, 247, 247, 1);
	}
</style>